<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>C.5 DOM操作方法 - jQuery快速参考</title>
<style type="text/css">
body { font-size:0.75em; }
table { width:99%; margin:0 auto; border-top:2px solid #000; border-bottom:2px solid #000; border-collapse:collapse; border-spacing:0; }
table th, table td { padding:0.4em 2em; }
table th { border-bottom:1px solid #000; }
</style>
</head>

<body>
<h3>jQuery快速参考（索引）</h3>
<ul>
  <li><a href="./jq_n1.html">C.1 选择符表达式</a></li>
  <li><a href="./jq_n2.html">C.2 DOM遍历方法</a></li>
  <li><a href="./jq_n3.html">C.3 事件方法</a></li>
  <li><a href="./jq_n4.html">C.4 效果方法</a></li>
  <li><a href="./jq_n5.html">C.5 DOM操作方法</a></li>
  <li><a href="./jq_n6.html">C.6 AJAX方法</a></li>
  <li><a href="./jq_n7.html">C.7 延迟方法</a></li>
  <li><a href="./jq_n8.html">C.8 其他方法</a></li>
</ul>
<hr />
<h1>jQuery快速参考</h1>
<h2>C.5 DOM操作方法</h2>
<p>第5章详细介绍了DOM操作方法。</p>
<h3>C.5.1 特性与属性</h3>
<table>
  <caption>
  表 C-22
  </caption>
  <tr>
    <th scope="col">DOM操作方法</th>
    <th scope="col">说明</th>
  </tr>
  <tr>
    <td>.attr(key)</td>
    <td>取得特性key的值</td>
  </tr>
  <tr>
    <td>.attr(key, value)</td>
    <td>设置特性key的值为value</td>
  </tr>
  <tr>
    <td>.attr(key, fn)</td>
    <td>设置特性key的值为fn（基于每个匹配的元素单独调用）返回的结果</td>
  </tr>
  <tr>
    <td>.attr(map)</td>
    <td>根据传入的键-值对参数设置属性的值</td>
  </tr>
  <tr>
    <td>.removeAttr(key)</td>
    <td>删除特性key</td>
  </tr>
  <tr>
    <td>.prop(key, fn)</td>
    <td>取得属性key的值</td>
  </tr>
  <tr>
    <td>.prop(key, value)</td>
    <td>设置属性key的值为value</td>
  </tr>
  <tr>
    <td>.prop(key, fn)</td>
    <td>将设置属性key的值为fn（基于每个匹配的元素单独调用）返回的结果</td>
  </tr>
  <tr>
    <td>.prop(map)</td>
    <td>设置属性值，以键-值对形式传入</td>
  </tr>
  <tr>
    <td>.removeProp(class)</td>
    <td>删除属性key</td>
  </tr>
  <tr>
    <td>.addClass(class)</td>
    <td>为每个匹配的元素添加传入的类</td>
  </tr>
  <tr>
    <td>.removeClass(class)</td>
    <td>从每个匹配的元素中删除传入的类</td>
  </tr>
  <tr>
    <td>.toggleClass(class)</td>
    <td>（针对每个匹配的元素）如果传入的类存在则删除该类，否则添加该类</td>
  </tr>
  <tr>
    <td>.hasClass(class)</td>
    <td>如果匹配的元素中至少有一个包含传入的类，则返回true</td>
  </tr>
  <tr>
    <td>.val()</td>
    <td>取得第一个匹配元素的value属性的值</td>
  </tr>
  <tr>
    <td>.val(value)</td>
    <td>设置每个匹配元素的value属性的值为传入的value</td>
  </tr>
</table>
<h3>C.5.2 内容</h3>
<table>
  <caption>
  表 C-23
  </caption>
  <tr>
    <th scope="col">DOM操作方法</th>
    <th scope="col">说明</th>
  </tr>
  <tr>
    <td>.html()</td>
    <td>取得第一个匹配元素的HTML内容</td>
  </tr>
  <tr>
    <td>.html(value)</td>
    <td>将每个匹配元素的HTML内容设置为传入的value</td>
  </tr>
  <tr>
    <td>.text()</td>
    <td>取得所有匹配元素的文本内容，返回一个字符串</td>
  </tr>
  <tr>
    <td>.text(value)</td>
    <td>设置每个匹配元素的文本内容为传入的value</td>
  </tr>
</table>
<h3>C.5.3 CSS</h3>
<table>
  <caption>
  表 C-24
  </caption>
  <tr>
    <th scope="col">DOM操作方法</th>
    <th scope="col">说明</th>
  </tr>
  <tr>
    <td>.css(key)</td>
    <td>取得CSS属性key的值</td>
  </tr>
  <tr>
    <td>.css(key, value)</td>
    <td>设置CSS属性key的值为传入的value</td>
  </tr>
  <tr>
    <td>.css(map)</td>
    <td>根据传入的键-值对参数设置CSS属性的值</td>
  </tr>
</table>
<h3>C.5.4 尺寸</h3>
<table>
  <caption>
  表 C-25
  </caption>
  <tr>
    <th scope="col">DOM操作方法</th>
    <th scope="col">说明</th>
  </tr>
  <tr>
    <td>.offset()</td>
    <td>取得第一个匹配元素相对于视口的上、左坐标值（单位：像素）</td>
  </tr>
  <tr>
    <td>.position()</td>
    <td>取得第一个匹配元素相对于.offsetParent()返回元素的上、左坐标值（单位：像素）</td>
  </tr>
  <tr>
    <td>.scrollTop()</td>
    <td>取得第一个匹配元素的垂直滚动位置</td>
  </tr>
  <tr>
    <td>.scrollTop(value)</td>
    <td>设置每个匹配元素的垂直滚动位置为传入的value</td>
  </tr>
  <tr>
    <td>.scrollLeft()</td>
    <td>取得第一个匹配元素的水平滚动位置</td>
  </tr>
  <tr>
    <td>.scrollLeft(value)</td>
    <td>设置每个匹配元素的水平滚动位置为传入的value</td>
  </tr>
  <tr>
    <td>.height()</td>
    <td>取得第一个匹配元素的高度</td>
  </tr>
  <tr>
    <td>.height(value)</td>
    <td>设置每个匹配元素的高度为传入的value</td>
  </tr>
  <tr>
    <td>.width()</td>
    <td>取得第一个匹配元素的宽度</td>
  </tr>
  <tr>
    <td>.width(value)</td>
    <td>设置每个匹配元素的宽度为传入的value</td>
  </tr>
  <tr>
    <td>.innerHeight()</td>
    <td>取得第一个匹配元素的包含内边距但不包含边框的高度</td>
  </tr>
  <tr>
    <td>.innerWidth()</td>
    <td>取得第一个匹配元素的包含内边距但不包含边框的宽度</td>
  </tr>
  <tr>
    <td>.outerHeight(includeMargin)</td>
    <td>取得第一个匹配元素的包含内边距、边框及可选的外边距的高度</td>
  </tr>
  <tr>
    <td>.outerWidth(includeMargin)</td>
    <td>取得第一个匹配元素的包含内边距、边框及可选的外边距的宽度</td>
  </tr>
</table>
<h3>C.5.5 插入</h3>
<table>
  <caption>
  表 C-26
  </caption>
  <tr>
    <th scope="col">DOM操作方法</th>
    <th scope="col">说明</th>
  </tr>
  <tr>
    <td>.append(content)</td>
    <td>在每个匹配元素内部的末尾插入content</td>
  </tr>
  <tr>
    <td>.appendTo(selector)</td>
    <td>将匹配的元素插入到selector选择符匹配的元素内部的末尾</td>
  </tr>
  <tr>
    <td>.prepend(content)</td>
    <td>将每个匹配元素内部的开头插入content</td>
  </tr>
  <tr>
    <td>.prependTo(selector)</td>
    <td>将匹配的元素插入到selector选择符匹配的元素内部的开头</td>
  </tr>
  <tr>
    <td>.after(content)</td>
    <td>在每个匹配元素的后面插入content</td>
  </tr>
  <tr>
    <td>.insertAfter(selector)</td>
    <td>将匹配的元素插入到selector选择符匹配的元素的后面</td>
  </tr>
  <tr>
    <td>.before(content)</td>
    <td>在每个匹配元素的前面插入content</td>
  </tr>
  <tr>
    <td>.insertBefore(selector)</td>
    <td>将匹配的元素插入到selector选择符匹配的元素的前面</td>
  </tr>
  <tr>
    <td>.wrap(content)</td>
    <td>将匹配的每个元素包装在content中</td>
  </tr>
  <tr>
    <td>.wrapAll(content)</td>
    <td>将匹配的每个元素作为一个单元包装在content中</td>
  </tr>
  <tr>
    <td>.wrapInner(content)</td>
    <td>将匹配的每个元素内部的内容包装在content中</td>
  </tr>
</table>
<h3>C5.6 替换</h3>
<table>
  <caption>
  表 C-27
  </caption>
  <tr>
    <th scope="col">DOM操作方法</th>
    <th scope="col">说明</th>
  </tr>
  <tr>
    <td>.replaceWith(content)</td>
    <td>将匹配的元素替换为content</td>
  </tr>
  <tr>
    <td>.replaceAll(selector)</td>
    <td>将selector选择符匹配的元素替换为匹配的元素</td>
  </tr>
</table>
<h3>C.5.7 删除</h3>
<table>
  <caption>
  表 C-28
  </caption>
  <tr>
    <th scope="col">DOM操作方法</th>
    <th scope="col">说明</th>
  </tr>
  <tr>
    <td>.empty()</td>
    <td>删除每个匹配元素的 子节点</td>
  </tr>
  <tr>
    <td>.remove([selector])</td>
    <td>从DOM中删除匹配的节点，也可以通过selector选择符筛选</td>
  </tr>
  <tr>
    <td>.detach([selector])</td>
    <td>从DOM中删除匹配的节点，也可以通过selector选择符筛选，但保留jQuery给它们添加的数据</td>
  </tr>
  <tr>
    <td>.unwrap()</td>
    <td>删除元素的父元素</td>
  </tr>
</table>
<h3>C.5.8 复制</h3>
<table>
  <caption>
  表 C-29
  </caption>
  <tr>
    <th scope="col">DOM操作方法</th>
    <th scope="col">说明</th>
  </tr>
  <tr>
    <td>.clone([withHandlers])</td>
    <td>返回所有匹配的元素的副本，也可以复制事件处理程序</td>
  </tr>
</table>
<h3>C.5.9 数据</h3>
<table>
  <caption>
  表 C-30
  </caption>
  <tr>
    <th scope="col">DOM操作方法</th>
    <th scope="col">说明</th>
  </tr>
  <tr>
    <td>.data(key)</td>
    <td>取得与第一个匹配元素关联的key键的数据项</td>
  </tr>
  <tr>
    <td>.data(key, value)</td>
    <td>设置与第一个匹配元素关联的key键的数据项为value</td>
  </tr>
  <tr>
    <td>.removeData(key)</td>
    <td>移除与每个匹配元素关联的key值的数据项</td>
  </tr>
</table>
<hr />
<h3>jQuery快速参考（索引）</h3>
<ul>
  <li><a href="./jq_n1.html">C.1 选择符表达式</a></li>
  <li><a href="./jq_n2.html">C.2 DOM遍历方法</a></li>
  <li><a href="./jq_n3.html">C.3 事件方法</a></li>
  <li><a href="./jq_n4.html">C.4 效果方法</a></li>
  <li><a href="./jq_n5.html">C.5 DOM操作方法</a></li>
  <li><a href="./jq_n6.html">C.6 AJAX方法</a></li>
  <li><a href="./jq_n7.html">C.7 延迟方法</a></li>
  <li><a href="./jq_n8.html">C.8 其他方法</a></li>
</ul>
<p>本内容收集自《jQuery基础教程<sup style="font-size:0.5em;">（第三版）</sup>》，仅自用，禁止发布与公开！</p>
</body>
</html>
